<template>
  <HeaderNav/>
  <article>
    <!-- 网站主体 -->
    <div id="main">
      <section class="ct">
        <!-- 上传表单-->
        <div class="upload">
          <h1>用户注册②<em>填写基本信息、完成用户注册第二步</em></h1>
          <!-- 注册步骤导航-->
          <div class="reg_step">
            <a class="step1">注册信息</a><a class="step">基本信息</a><a class="step2">注册完成</a>
          </div>

          <form>
            <p class="file">
              <input type="file" name="resource" @change="handleAvatar"
                     accept="image/png,image/jpeg,image/gif,image/bmp">
              <!-- 上传后的效果 -->
              <span class="t2" v-if="upload.state">
								<img :src="avatarDataUrl"/>
								<b>{{ upload.name }}</b>
								<a>重新上传</a>
							</span>
              <span class="t1" v-else>点击上传用户头像、图片小于5MB</span>
            </p>

            <p>
              <label>出生日期：</label>
              <input class="upt" type="date" v-model="formData.birth"/>
            </p>

            <p>
              <label>昵称：</label>
              <input class="upt" type="text" v-model="formData.nickName"/>
              <span class="source-tag-msg">昵称是您在本网站展示的身份信息</span>
            </p>

            <p>
              <label>真实姓名：</label>
              <input class="upt" type="text" v-model="formData.realName"/>
            </p>

            <p>
              <label>性别：</label>
              <select name="sex" class="upt" v-model="formData.sex">
                <option value="s">保密</option>
                <option value="m">男</option>
                <option value="f">女</option>
              </select>
            </p>

            <p>
              <a class="btn" @click="handleNextRegister">确认完成</a>
<!--              <a class="skip" href="javascript:void(0)" @click="goThreeRegister()">跳过该步骤</a> -->
            </p>
          </form>
        </div>
      </section>
    </div>
  </article>
  <Footer/>
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";

export default {
  components: {
    HeaderNav,
    Footer,
  },
  data() {
    return {
      avatarDataUrl: null,  // 预览头像
      upload: {
        state: false,
        name: "",
      },
      formData: { // 表单内容
        birth: null,
        nickName: null,
        realName: null,
        sex: "s",
        avatar: null,  // 上传后的地址
      },
    }
  },
  methods: {
    handleAvatar(event) {
      // 获取上传的头像
      let avatar = event.target.files[0];
      this.upload.name = avatar.name;
      this.$toastr.warning("头像正在上传中...", "", { timeOut: 0, progressBar: true,
        onShown: () => {
          // 发送异步请求， 上传头像
          this.$api.uploadAvatar(avatar).then(ret=> {
             if (ret.status) {
               this.formData.avatar = ret.data ;
               this.avatarDataUrl = this.$api.preview(ret.data);
               this.upload.state = true;
               this.$toastr.clear(); // 清除弹出
             }
          })
        }
      })
    },
    async handleNextRegister() {
      // 延迟三秒后自动跳转到成功页面
      let ret = await this.$api.registTwo({...this.formData, uid: this.$route.query.uid, sign: this.$route.query.sign});
      if (ret.status) {
        // 继续第三步
         this.goThreeRegister("two", ret.data.uid, ret.data.sign);
      } else {
        for (let err in ret.error) {
           this.$toastr.error(ret.error[err]);
        }
        this.$toastr.error(ret.message);
      }
    },
    goThreeRegister(step = "one", uid = this.$route.query.uid, sign = this.$route.query.sign) {
      // 跳过 (校验信息来自步骤一)
      this.$api.registThree({uid, step, sign}).then(ret => {
        if (ret.status) {
          // 跳转到最后一个页面
          this.$toastr.success("激活邮件已发送、请注意查收", "", {
            timeOut: 2000, onHidden: () => {
              // 处理找回密码的逻辑, 进行下一个页面
              this.$router.push({name: "third", query: ret.data})
            }
          })
        }
      })
    }
  }
}
</script>

<style>
</style>